<template>
	<view class="cost-detail" :style="{'margin-bottom': bottomHeight+'rpx'}">
		<view class="cost-con">
			<view class="title">费用明细</view>
			<view class="const-list">
				<view class="dt">
					<view class="protitle">{{baseTitle}}</view>
					<view class="total">{{globalExchangeRate}}{{decimalMoney(totalMoney)}}</view>
				</view>
				<block v-if="priceInfo">
					<view v-for="(item,index) in priceInfo" :key="index" class="dd">
						<view class="left">
							<view class="proname">{{item.suit_name}}</view>
							<view class="suitname">{{item.suit_name_s}}</view>
						</view>
						<view class="price">{{item.price}} × {{totalNum}}</view>
					</view>
				</block>
				
			</view>
			<view class="discounts-list" v-if="discountMoney > 0">
				<view class="dt" :class="{color:titleColor}">
					<view>优惠</view>
					<view><text class="symbol">-{{globalExchangeRate}}</text>{{discountMoney}}</view>
				</view>
				<view class="dd" v-if="discountInfo.integral && discountInfo.integral.money > 0">
					<view>积分抵扣</view>
					<view>-{{globalExchangeRate}}{{decimalMoney(discountInfo.integral.money)}}</view>
				</view>
				<view class="dd" v-if="discountInfo.coupon && discountInfo.coupon.money > 0">
					<view>优惠券（{{discountInfo.coupon.name}}）</view>
					<view>-{{globalExchangeRate}}{{decimalMoney(discountInfo.coupon.money)}}</view>
				</view>
				<view class="dd" v-if="discountInfo.red_envelope && discountInfo.red_envelope.money > 0">
					<view>红包抵扣</view>
					<view>-{{globalExchangeRate}}{{decimalMoney(discountInfo.red_envelope.money)}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * 费用明细弹窗
	 * @property {Number} bottomHeight 弹窗与底部间距（用于有底部悬浮栏的页面）
	 * @property {Boolean} titleColor 标题是否添加颜色
	 * @property {Boolean} paySum 支付总额显示
	 * 
	 */
	export default {
		props: {
			bottomHeight: {
				type: Number,
				default: 0
			},
			baseTitle: { // 基础费用标题
				type: String,
				default: '基础费用'
			},
			titleColor: {
				type: Boolean,
				default: false
			},
			discountInfo:{
				type:Object,
				default:{}
			},
			priceInfo:{
				type:Array,
				default:{}
			},
			totalMoney:{
				type: Number,
				default: 0
			},
			discountMoney:{
				type: Number,
				default: 0
			},
			totalNum:{
				type: Number,
				default: 1
			}
		},
		data() {
			return {
				storeMoneyPay:0
			}
		},
		methods: {
			// 金额保留两位
			decimalMoney(val){
				return parseFloat(val).toFixed(2);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.module-block{
		padding: 0 25rpx;
		margin-bottom: 20rpx;
	}
	.cost-detail{
		font-family: "Arial";
		.cost-con{
			max-height: 800rpx;
			padding: 0 25rpx;
			background-color: #fff;
			overflow-y: auto;
			font-size: $uni-font-size-base;
			.title{
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				font-size: 32rpx;
				color: #000;
				border-bottom: 1rpx solid $uni-border-color;
			}
		}
		.const-list{
			padding: 23rpx 0 14rpx;
			.dt{
				@extend .justifyspace;
				margin-bottom: 17rpx;
				&.color{
					color: $uni-color-primary;
				}
				.protitle{
					max-width: 80%;
					@extend .ellipse;
				}
				.total{
					color: #f60;
				}
			}
			.dd{
				@extend .justifyspacec;
				line-height: 1.833;
				font-size: $uni-font-size-sm;
				color: $uni-text-color-grey;
				.left{
					@extend .justifyspacec;
					.proname{
						width: 300rpx;
						@extend .ellipse;
						color: $uni-text-color;
						margin-right: 20rpx;
					}
					.suitname{
						width: 200rpx;
						color: $uni-text-color-grey;
						text-align: left;
						@extend .ellipse;
					}
				}
			}	
		}
		.discounts-list{
			padding: 23rpx 0 14rpx;
			border-top: 1rpx solid $uni-border-color;
			.dt{
				@extend .justifyspace;
				margin-bottom: 17rpx;
				&.color{
					color: $uni-color-primary;
				}
			}
			.dd{
				@extend .justifyspace;
				line-height: 1.833;
				font-size: $uni-font-size-sm;
			}	
		}
		
		
	}
</style>
